<script setup lang="ts">
// 定义投资方数据
const investors = ref([
  {
    id: 1,
    name: 'VC1',
    description: '知名投资机构',
    bgColor: 'bg-blue-500',
    hoverColor: 'group-hover:text-blue-600'
  },
  {
    id: 2,
    name: 'VC2',
    description: '科技投资基金',
    bgColor: 'bg-green-500',
    hoverColor: 'group-hover:text-green-600'
  },
  {
    id: 3,
    name: 'VC3',
    description: '产业投资集团',
    bgColor: 'bg-purple-500',
    hoverColor: 'group-hover:text-purple-600'
  },
  {
    id: 4,
    name: 'VC4',
    description: '创新投资机构',
    bgColor: 'bg-orange-500',
    hoverColor: 'group-hover:text-orange-600'
  }
])
</script>

<template>
  <!-- 投资方 -->
  <section id="investors" class="section bg-gray-50 w-full py-16">
    <div class="w-full max-w-[2000px] mx-auto px-4 md:px-8 lg:px-16">
      <div class="text-center mb-12">
        <h2 class="text-3xl lg:text-4xl font-bold mb-4">
          <span
            class="bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 bg-clip-text text-transparent">投资方</span>
        </h2>
        <p class="text-lg text-gray-600 text-center">
          获得知名投资机构的信任与支持
        </p>
      </div>

      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <!-- 循环生成投资方卡片 -->
        <div
          v-for="investor in investors"
          :key="investor.id"
          class="group flex flex-col transform items-center border border-gray-100 rounded-2xl bg-white p-6 text-center shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2"
        >
          <div class="relative mb-4">
            <div
              :class="[
                'absolute inset-0 rounded-full opacity-30 blur-xl transition-opacity duration-300 group-hover:opacity-50',
                investor.bgColor
              ]"
            />
            <div
              :class="[
                'relative h-16 w-16 flex transform items-center justify-center rounded-full shadow-lg transition-transform duration-300 group-hover:scale-110',
                investor.bgColor
              ]"
            >
              <span class="text-white font-bold">{{ investor.name }}</span>
            </div>
          </div>
          <h3 :class="['text-lg font-bold text-gray-900 transition-colors', investor.hoverColor]">{{ investor.description }}</h3>
        </div>
      </div>
    </div>
  </section>
</template>
